<template>
    <div class="divBox">
        <el-card class="box-card">
            <div class="add">
                <div class="attr-title">
                    添加电子账户
                </div>
                <!-- 表单 -->
                <div class="form">
                    <!-- 表单部分 -->
                    <el-form ref="form" :model="form" label-width="200px" :rules='rules'>
                        <el-form-item label="申请人类型" prop="atype">
                          <el-radio-group v-model="form.atype">
                            <el-radio label="法定代表人"></el-radio>
                            <el-radio label="授权人"></el-radio>
                          </el-radio-group>
                        </el-form-item>
                        <div class="flex">
                            <el-form-item label="申请人姓名" prop="aname">
                              <el-input v-model="form.aname"></el-input>
                            </el-form-item>
                            <el-form-item label="申请人手机号" prop="aiphone">
                              <el-input v-model="form.aiphone"></el-input>
                            </el-form-item>
                        </div>
                        <div class="flex">
                            <el-form-item label="申请人身份证号" prop="aidcard">
                              <el-input v-model="form.aidcard"></el-input>
                            </el-form-item>
                            <el-form-item label="身份证有效期" prop="date1">
                                <el-col :span="11">
                                  <el-date-picker type="date" placeholder="请选择日期" v-model="form.date1"></el-date-picker>
                                </el-col>
                            </el-form-item>
                        </div>
                        <div class="flex">
                            <el-form-item label="单位名称" prop="companyname">
                              <el-input v-model="form.companyname"></el-input>
                            </el-form-item>
                            <el-form-item label="法人姓名" prop="reprname">
                              <el-input v-model="form.reprname"></el-input>
                            </el-form-item>
                        </div>
                        <el-form-item label="法人身份证号" prop="repridcard">
                              <el-input v-model="form.repridcard"></el-input>
                        </el-form-item>
                        <!-- 表单部分 -->
                        <!-- 图片上传 -->
                        <div class="flex">
                            <div>
                                <el-form-item prop="bussLicensePic" label="营业执照图片">
                                  <el-upload class="avatar-uploader" accept=".JPG, .png, .jpeg" action="#" :auto-upload="true"
                                     :show-file-list="false" :before-upload="beforeUpload" name="bussLicensePic"
                                    :http-request="handleUploadForm">
                                    <img v-if="form.bussLicensePic" class="avatar" :src="form.bussLicensePic" />
                                    <i v-else class="el-icon-plus el-icon-picture"></i>
                                  </el-upload>
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item prop="authorizerFrontPic" label="法人身份证正面">
                                    <el-upload class="avatar-uploader" accept=".JPG, .png, .jpeg" action="#" :auto-upload="true"
                                       :show-file-list="false" :before-upload="beforeUpload" name="authorizerBackPic"
                                      :http-request="handleUploadForm">
                                      <img v-if="form.authorizerBackPic" class="avatar" :src="form.authorizerBackPic" />
                                      <i v-else class="el-icon-plus el-icon-picture"></i>
                                    </el-upload>
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item prop="authorizerBackPic" label="法人身份证反面">
                                    <el-upload class="avatar-uploader" accept=".JPG, .png, .jpeg" action="#" :auto-upload="true"
                                       :show-file-list="false" :before-upload="beforeUpload" name="authorizerBackPic"
                                      :http-request="handleUploadForm">
                                      <img v-if="form.authorizerBackPic" class="avatar" :src="form.authorizerBackPic" />
                                      <i v-else class="el-icon-plus el-icon-picture"></i>
                                    </el-upload>
                                </el-form-item>
                            </div>
                        </div>
                        <!-- 图片上传 -->
                        <!-- 按钮 -->
                        <div class="flex">
                            <div class="but">
                                <el-form-item>
                                    <el-button type="primary" @click="submitForm('form')">确认</el-button>
                                    <el-button @click="resetForm('ruleForm')">取消</el-button>
                                </el-form-item>
                            </div>
                        </div>
                        <!-- 按钮 -->
                    </el-form>
                </div>
                <!-- 表单 -->
            </div>
        </el-card>
    </div>
</template>

<script>
import {fileImageApi} from '../../api/systemSetting';
import {validPhone,validIdCart} from '@/utils/validate'
// import UploadFiled from '../components/UploadFiled/UploadFiled'
export default {
    data() {
        return {
            ruleForm: {
                bussLicensePic: '',
                legalBackPic: '',
                legalFrontPic: '',
                legalFrontPic: '',
                atype: '',
                type: [],
                aname:'',
                aiphone: '',
                aidcard: '',
                companyname:'',
                reprname:'',
                repridcard:''
            },
            // 身份证有效期
            pickerOptions: {
              shortcuts: [{
                text: '今天',
                onClick(picker) {
                  picker.$emit('pick', new Date());
                }
            }, {
                text: '昨天',
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24);
                  picker.$emit('pick', date);
                }
            }, {
                text: '一周前',
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', date);
                }
              }]
            },
            form: {},
            rules:{
                bussLicensePic: 
                [
                    {
                        required: true,
                        message: "请选择营业执照图片", 
                        trigger: "blur" 
                    },
                ],
                authorizerBackPic: 
                [
                    {
                        required: true,
                        message: "请选择法人身份证反面图片",
                        trigger: "blur",
                    },
                ],
                authorizerFrontPic: 
                [
                    {
                        required: true,
                        message: "请选择法人身份证正面图片",
                        trigger: "blur",
                    },
                ],
                atype: 
                [
                    { 
                        required: true, 
                        message: '请选择申请人类型', 
                        trigger: 'change' 
                    }
                ],
                aname: 
                [
                    { 
                        required: true,
                        message: '请输入申请人姓名', 
                        trigger: 'blur' 
                    },
                    { 
                        min: 3, 
                        max: 5, 
                        message: '长度在 2 到 5 个字符', 
                        trigger: 'blur' 
                    }
                ],
                aiphone:
                [
                    { 
                        required: true,
                        message: '请输入申请人手机号', 
                        trigger: 'blur' 
                    },
                    {
                        validator: validPhone,
                        trigger: 'blur'
                    },
                ],
                aidcard:
                [
                    { 
                        required: true,
                        message: '请输入申请人身份证号', 
                        trigger: 'blur' 
                    },
                    {
                        validator: validIdCart,
                        trigger: 'blur'
                    },
                ],
                date1:
                [
                  {
                    required: true,
                    message: '请输入身份证号有效期', 
                    trigger: 'blur' 
                  }
                ],
                companyname:
                [
                    { 
                        required: true,
                        message: '请输入单位名称', 
                        trigger: 'blur' 
                    },
                ],
                reprname:
                [
                    { 
                        required: true,
                        message: '请输入法人姓名', 
                        trigger: 'blur' 
                    },
                    { 
                        min: 3, 
                        max: 5, 
                        message: '长度在 2 到 5 个字符', 
                        trigger: 'blur' 
                    }
                ],
                repridcard:
                [
                    { 
                        required: true,
                        message: '请输入法人身份证号', 
                        trigger: 'blur' 
                    },
                    {
                        validator: validIdCart,
                        trigger: 'blur'
                    },
                ],
            },
        }
    },
    methods:{
        // 按下按钮校验表单
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
        //upload上传图片前变动事件
        beforeUpload(file, fileList) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        return isLt2M;
        },
        handleUploadForm(param) {
      const formData = new FormData();
      const data = {
        model: "user",
        pid: 7,
      };
      formData.append("multipart", param.file);

      let loading = this.$loading({
        lock: true,
        text: "上传中，请稍候...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      console.log(param.filename);
      fileImageApi(formData, data)
        .then((res) => {
          if (param.filename == "bussLicensePic") {
            this.form.bussLicensePic = res.url;
          } else if (param.filename == "legalFrontPic") {
            this.form.legalFrontPic = res.url;
          } else if (param.filename == "legalBackPic") {
            this.form.legalBackPic = res.url;
          } else if (param.filename == "authorizerBackPic") {
            this.form.authorizerBackPic = res.url;
          } else if (param.filename == "authorizerFrontPic") {
            this.form.authorizerFrontPic = res.url;
          }
          loading.close();
          this.$message.success("上传成功");
        })
        .catch((res) => {
          loading.close();
        });
    },
    }
}
</script>

<style lang="scss" scoped>
.add {
    width: 100%;

    .attr-title {
        font-size: 20px;
        font-weight: 600;
        text-align: center;
        margin: 30px 0;
    }
}
.card {
    display: flex;
    justify-content: center;
    color: rgba(42, 130, 228, 1);
}
.flex{
    display: flex;
    .el-form-item{
        justify-content: space-around;
    }
    .but{
      justify-content: center;
      margin: 30px auto;
    }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.el-icon-picture {
  font-size: 28px;
  color: #8c939d;
  width: 240px;
  height: 130px;
  line-height: 130px;
  text-align: center;
}

</style>